Skip to content

feat(partners): add dedicated Railway Gold partner landing page#925

Open
jhislop-design wants to merge 5 commits into
mainfrom
jonny/eager-tesla-3b42bb
Open

feat(partners): add dedicated Railway Gold partner landing page#925
jhislop-design wants to merge 5 commits into
mainfrom
jonny/eager-tesla-3b42bb

Conversation

@jhislop-design
Copy link
Copy Markdown

@jhislop-design jhislop-design commented May 15, 2026

Summary

Replaces the generic /partners/$partner template for Railway with a purpose-built landing page at /partners/railway, fulfilling the Gold-tier sponsorship agreement. The static file-routed /partners/railway takes precedence over /partners/$partner, so the legacy template stays untouched for every other partner.

What's on the page

  • Hero — Railway brand wordmark (light/dark via existing PartnerImage), Gold Sponsor metadata, headline, intro copy, customer quote, two CTAs
  • Stats row — 2M+ devs, < 2 min deploy, 100 Gbps networking, $0 to start
  • 8 feature cards — auto-detect config, PR previews, observability, private networking, rollbacks, hard spend limits, regions, unlimited envs
  • 3-step deploy flow + two real Shiki-highlighted code blocks (tanstack.config.ts and terminal)
  • Library fit — chips for every TanStack lib + deeper notes for Start / Router / Query / DB
  • 4-tier pricing — Free / Hobby / Pro (highlighted) / Enterprise + per-second metered-pricing reference card
  • 3 customer testimonials — Common, BoxOutSports, Every (public quotes with real savings figures)
  • 6-question FAQ on the existing Collapsible component
  • Dark CTA section + Gold-sponsor credit footer

Built from existing tanstack.com primitives

To stay visually and behaviorally consistent with the rest of the site, the page uses:

  • CodeBlock (Shiki) for code snippets — fixes a hand-rolled <pre> that was being clobbered by the global pre { @apply text-black } rule in app.css and rendering invisible on dark backgrounds
  • Card for every panel (feature, step, library, pricing, testimonial)
  • Button (as="a") for every CTA, with brand-tinted className overrides
  • Collapsible / CollapsibleTrigger / CollapsibleContent for the FAQ
  • seo() for meta tags (title, description, OG, Twitter Card)
  • PartnerImage + existing railway-{black,white}.svg assets for the hero wordmark

SEO

  • Page-specific title + description targeting "deploy tanstack to railway" and related queries
  • Two application/ld+json blocks emitted in SSR'd HTML:
    • The standard WebPage schema from getPartnerJsonLd()
    • A new FAQPage schema generated from the on-page FAQ — for Google rich results and AI search agents (ChatGPT / Claude / Perplexity)

Analytics

  • partner_viewed fires on mount with placement: 'detail'
  • partner_clicked fires on every outbound Railway CTA with destination_host: 'railway.com', matching the existing taxonomy in src/utils/analytics/events.ts

UTM tracking

All four outbound Railway links carry utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page.

Test plan

  • Visit /partners/railway in dev — hero, stats, features, code blocks, pricing tiers, FAQ, and dark CTA all render
  • Toggle theme — brand wordmark swaps black ↔ white, Shiki picks up .aurora-x in dark mode
  • Click each FAQ question — only one open at a time, smooth grid-rows transition, Plus icon rotates to ×
  • Click each outbound CTA — opens railway.com with the partner-page UTM intact
  • View page source on the deployed preview — both <script type="application/ld+json"> blocks present
  • Confirm partner_viewed + partner_clicked events show up in GA4 DebugView with partner_id=railway, placement=detail
  • Visit /partners/netlify to confirm the generic /partners/\$partner template still works for every other partner

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Added a Railway partner landing page at /partners/railway with hero, stats, feature grid, setup steps, library fit, pricing (including metered tiers), testimonials, FAQ with collapsibles, CTAs, and partner footer link.
    • Page includes enhanced SEO and JSON‑LD metadata and client-side analytics tracking for page views and CTA clicks.
    • Embedded code samples for developer-focused guidance.

Review Change Stack

Replaces the generic `partners.$partner` template for Railway with a
purpose-built landing route at `/partners/railway`, in line with the
Gold-tier sponsorship agreement.

The page is built almost entirely from existing tanstack.com primitives
to stay visually and behaviorally consistent with the rest of the site:

- `CodeBlock` (Shiki) for the config and terminal snippets (replaces a
  hand-rolled `<pre>` which inherited the global `text-black` rule and
  rendered invisible on dark backgrounds)
- `Card` for feature, step, library-fit, pricing and testimonial panels
- `Button` (`as="a"`) for every CTA, with brand-tinted overrides on the
  hero and dark CTA section
- `Collapsible` / `CollapsibleTrigger` / `CollapsibleContent` for the
  FAQ accordion, controlled by a parent `openFaq` state so only one
  answer expands at a time
- `seo()` for title/description/OG/Twitter Card meta
- Existing `PartnerImage` and `railway-{black,white}.svg` brand marks
  for the hero

SEO additions:

- Page-specific title + description targeting "deploy tanstack to
  railway" and related queries
- Two `application/ld+json` blocks in SSR: the existing partner
  `WebPage` schema plus a new `FAQPage` schema generated from the
  on-page FAQ for Google rich results + AI search agents

Analytics:

- Fires `partner_viewed` on mount with `placement: 'detail'`
- Fires `partner_clicked` with `destination_host: 'railway.com'` on
  every outbound Railway CTA, matching the existing taxonomy in
  `analytics/events.ts`

All outbound Railway links carry
`utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page`.
The static `/partners/railway` route takes file-routing precedence
over the parametric `/partners/$partner` template, so the legacy
template is preserved untouched for every other partner.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 27f35d6d-2173-4527-ac6f-04ed7ac8a24e

📥 Commits

Reviewing files that changed from the base of the PR and between 9c3e517 and dd34eae.

📒 Files selected for processing (1)
  • src/routes/partners.railway.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/routes/partners.railway.tsx

📝 Walkthrough

Walkthrough

Adds a new Railway Gold Partner landing page and registers the child route /partners/railway in the generated route tree; implements the full marketing page with content/constants, SEO/JSON‑LD, analytics tracking, helper components, and all UI sections (hero, features, pricing, testimonials, FAQ, CTA, footer).

Changes

Railway Gold Partner Page

Layer / File(s) Summary
Route registration in generated route tree
src/routeTree.gen.ts
The new /partners/railway route is registered as a child of PartnersRoute with id: '/railway' and wired into all type-safe route lookup maps (FileRoutesByFullPath, FileRoutesByTo, FileRoutesById), type unions, and module augmentation for TanStack Router's FileRoutesByPath.
Page content data and constants
src/routes/partners.railway.tsx
Local constants and arrays define Railway URLs, code snippets, features, 3-step deployment steps, pricing tiers, metered pricing items, testimonials, supported libraries, and FAQ items used across the page.
FAQ JSON‑LD and route head
src/routes/partners.railway.tsx
Adds getFaqJsonLd() and a head function that composes SEO meta tags and conditionally injects partner JSON‑LD plus the FAQ FAQPage JSON‑LD; exports the Route wired to RailwayPartnerPage.
Helper components and click tracking
src/routes/partners.railway.tsx
Adds CheckBadge, RailwayCodeExample, and trackRailwayClick() which emits partner_clicked for external CTAs; supports code sample rendering and CTA analytics.
Page state, mount effects, and partner load
src/routes/partners.railway.tsx
RailwayPartnerPage initializes FAQ open state, fires a partner_viewed analytics event on mount, and loads partner data via getPartnerById('railway') for conditional UI and JSON‑LD.
Hero and stats
src/routes/partners.railway.tsx
Renders hero (with conditional partner image and tracked CTAs) and the stats summary grid.
Features, how‑it‑works, and code examples
src/routes/partners.railway.tsx
Renders feature cards, the 3‑step deployment guide, and two code examples with tracked CTAs to deploy/read guide.
Library compatibility and pricing
src/routes/partners.railway.tsx
Renders library fit chips and detail cards, pricing tiers (including highlighted tier), metered pricing grid, and CTAs to start or estimate costs.
Testimonials and FAQ
src/routes/partners.railway.tsx
Renders testimonials, tracked CTA to move the app to Railway, and FAQ collapsibles driven by openFaq state.
Final CTA and footer
src/routes/partners.railway.tsx
Renders final CTA buttons (tracked), partner/footer link to /partners and railway.com, and appends the shared Footer component.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped to add a Railway site,
Hero shining, faqs tucked tight,
JSON‑LD glows, CTAs take flight,
Events tracked through day and night,
🚂✨ — a rabbit's small delight!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title accurately and concisely summarizes the main change: adding a dedicated Railway Gold partner landing page. It directly relates to the substantial changes across two files that implement this feature.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch jonny/eager-tesla-3b42bb

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@jhislop-design jhislop-design changed the title ... feat(partners): add dedicated Railway Gold partner landing page May 15, 2026
jhislop-design and others added 3 commits May 18, 2026 09:17
Voice + conversion pass before shipping. The hero, feature cards, and
section headings now match TanStack's restrained, pragmatic tone instead
of echoing Railway's own marketing site.

Copy changes:

- Hero paragraph rewritten using the same framing as
  `partnerGuidance.railway` in `partner-pages.ts` (drop "all-in-one
  intelligent cloud platform trusted by 2M+ developers" — that's
  Railway's tagline, not TanStack's voice)
- Feature card descriptions tightened to be outcome-focused
  ("No YAML to maintain.", "Test routing, data, and server logic
  before merging.")
- Replace emoji feature icons with Lucide icons (Rocket,
  GitPullRequest, LineChart, Network, Undo2, ShieldCheck, Globe,
  Infinity) to match the site's icon language
- Testimonial section heading "Teams are saving big on infrastructure"
  → "What teams say after switching" + a neutral framing line

CTAs:

The page previously had only the hero CTA + final CTA section, leaving
~6 content sections between them with no out-link. Added three mid-page
CTA blocks and varied the labels so no two CTAs read the same:

- Hero primary: "Deploy free in 2 minutes" (+ "No credit card · $5 in
  trial credits on signup" microcopy)
- After how-it-works code blocks: "Try the Railway preset" + "Read the
  deployment guide"
- After pricing tiers: "Start with $5 in credits" + "Estimate your
  costs" (new link to railway.com/pricing)
- After testimonials: "Move your app to Railway" + per-second-billing
  microcopy
- Final CTA: "Deploy your TanStack app" + "Open the docs"

Outbound railway.com links: 4 → 9, all distinct labels, all carrying
the partner-page UTM.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Step 01 was `npx create-tsrouter-app my-app`, which is the older
router-only scaffolder. The TanStack Start docs recommend the unified
CLI for new apps, so match the official getting-started instructions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant